<template>
  <view class="container">
    <!-- 钱包余额 -->
    <view class="wallet-header">
      <view class="balance-section">
        <text class="balance-label">账户余额(元)</text>
        <view class="balance-amount">
          <text class="amount">{{ walletInfo.balance.toFixed(2) }}</text>
          <text class="unit">元</text>
        </view>
        <view class="balance-actions">
          <button class="action-btn" @click="recharge">充值</button>
          <button class="action-btn" @click="withdraw">提现</button>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-grid">
      <view class="menu-item" @click="goToPage('/pages/wallet/recharge')">
        <image class="menu-icon" src="/static/icons/recharge.png"></image>
        <text class="menu-text">充值</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/wallet/withdraw')">
        <image class="menu-icon" src="/static/icons/withdraw.png"></image>
        <text class="menu-text">提现</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/wallet/bill')">
        <image class="menu-icon" src="/static/icons/bill.png"></image>
        <text class="menu-text">账单</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/wallet/coupon')">
        <image class="menu-icon" src="/static/icons/coupon.png"></image>
        <text class="menu-text">优惠券</text>
      </view>
    </view>
    
    <!-- 优惠活动 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">优惠活动</text>
      </view>
      <view class="promo-list">
        <view class="promo-item" v-for="n in 3" :key="n">
          <view class="promo-content">
            <text class="promo-title">充值满100减10元</text>
            <text class="promo-desc">限时优惠活动</text>
          </view>
          <button class="promo-btn">立即参与</button>
        </view>
      </view>
    </view>
    
    <!-- 交易记录 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">最近交易</text>
        <text class="more" @click="goToPage('/pages/wallet/bill')">查看更多 ></text>
      </view>
      <view class="transaction-list">
        <view class="transaction-item" v-for="n in 5" :key="n">
          <view class="transaction-info">
            <text class="transaction-title">充电消费</text>
            <text class="transaction-time">2023-06-{{ 10+n }} 1{{ n }}:{{ 10+n }}{{ n }}:{{ 20+n }}{{ n }}</text>
          </view>
          <text class="transaction-amount">-{{ 10+n }}.{{ n }}0</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'
import store from '../../store/index.js'

export default {
  data() {
    return {
      walletInfo: {
        balance: 0,
        couponCount: 0
      }
    }
  },
  onLoad() {
    this.getWalletInfo()
  },
  methods: {
    // 获取钱包信息
    async getWalletInfo() {
      try {
        const res = await api.wallet.getWalletInfo()
        if (res.code === 200) {
          this.walletInfo = res.data
          // 更新store中的钱包信息
          store.commit('SET_WALLET_INFO', res.data)
        }
      } catch (error) {
        console.error('获取钱包信息失败:', error)
      }
    },
    
    // 充值
    recharge() {
      uni.navigateTo({
        url: '/pages/wallet/recharge'
      })
    },
    
    // 提现
    withdraw() {
      uni.navigateTo({
        url: '/pages/wallet/withdraw'
      })
    },
    
    // 跳转页面
    goToPage(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 20rpx;
}

.wallet-header {
  background: linear-gradient(90deg, #007aff, #00c8ff);
  padding: 40rpx 20rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.balance-label {
  font-size: 28rpx;
  opacity: 0.9;
}

.balance-amount {
  margin: 20rpx 0;
}

.amount {
  font-size: 60rpx;
  font-weight: bold;
}

.unit {
  font-size: 32rpx;
  margin-left: 10rpx;
}

.balance-actions {
  display: flex;
  margin-top: 30rpx;
}

.action-btn {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #fff;
  margin: 0 10rpx;
  border-radius: 10rpx;
  padding: 15rpx;
  font-size: 28rpx;
}

.menu-grid {
  display: flex;
  background-color: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.menu-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.menu-text {
  font-size: 24rpx;
  color: #333;
}

.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
}

.more {
  font-size: 24rpx;
  color: #999;
}

.promo-list {
  padding: 20rpx 0;
}

.promo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff9e6;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.promo-item:last-child {
  margin-bottom: 0;
}

.promo-content {
  flex: 1;
}

.promo-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.promo-desc {
  font-size: 24rpx;
  color: #999;
}

.promo-btn {
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.transaction-list {
  padding: 20rpx 0;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.transaction-item:last-child {
  border-bottom: none;
}

.transaction-info {
  flex: 1;
}

.transaction-title {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.transaction-time {
  font-size: 24rpx;
  color: #999;
}

.transaction-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6600;
}
</style>